<template>
	<view class="mm-article" :style="{padding}">
		<view class="mm-article__title">
			{{title}}
		</view>
		<view class="mm-article__info" :style="{color: $theme.tipsColor}">
			<text v-for="(item, index) in info" :key="index">{{item}}</text>
		</view>
		<view class="mm-article__content">
			{{content}}
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			info: {
				type: Array,
				default: () => []
			},
			content: {
				type: String,
				default: ''
			},
			padding: {
				type: String,
				default: '25rpx 30rpx'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mm-article {
		padding: 25rpx 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		&__title {
			font-size: 32rpx;
			font-weight: 500;
		}
		&__info {
			font-size: 24rpx;
			line-height: 50rpx;
			display: flex;
			margin-top: 4rpx;
			text {
				margin-right: 20rpx;
				&:last-child {
					margin-right: 0;
				}
			}
		}
		&__content {
			font-size: 28rpx;
			line-height: 50rpx;
		}
	}
</style>
